<template>
  <div id="chart-main" class="main-index" ref="main">
    <div class="main_grid">
      <!-- <vue-particles
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles> -->
      <div class="main_top"></div>
      <div class="main_con">
        <!-- 返回 -->
        <transition
          enter-active-class="animate__animated animate__fadeInLeftBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutLeftBig animate__delay-0.1s"
        >
          <div
            class="back-box"
            @click="allshow = true"
            v-show="allshow == false"
          >
            <div style="float: left" class="back-btn"></div>
            <div style="float: left" class="back-span">返回主页</div>
          </div>
        </transition>

        <!-- 统计数据 start-->
         <transition
           enter-active-class="animate__animated animate__fadeInDown animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutUp animate__delay-0.1s"
        >
          <div style="width:11.5%;position:absolute;left:26%;top:9.2%;z-index:1000000" v-show="allshow != false">
            <div style="color:#fff;border-bottom:1px solid #334cff;border-top:1px solid #334cff;padding:10px 15px;magin:0 auto;background-color:rgba(0,0,0,0.3);">
              <div style="margin-bottom:5px">论文总数：
                <span style="color:#8098ee;display: inline-block;">
                  <count-to :end="lunwenData.total" :decimals="2" :timing="0">
                      <span slot="right">&nbsp;亿</span>
                    </count-to>
                </span>
                 <transition
                    enter-active-class="animate__animated animate__fadeIn animate__delay-0.1s"
                    leave-active-class="animate__animated animate__fadeOut animate__delay-0.1s"
                  >
                 <span style="margin-left:5px;color:rgba(74, 241, 208, 0.9)" v-if="lunwenData.addNumberShow">+ {{lunwenData.addNumber}}<Icon type="md-arrow-round-up" style="display: inline-block;"/></span>
                 </transition>
              </div>
              <div style="margin-bottom:5px">会议论文数：
                <span style="color:#8098ee;display: inline-block;">
                  <count-to :end="huiyilunwenData.total" :timing="0">
                      <span slot="right">&nbsp;万</span>
                  </count-to>
                </span>
                <transition
                    enter-active-class="animate__animated animate__fadeIn animate__delay-0.1s"
                    leave-active-class="animate__animated animate__fadeOut animate__delay-0.1s"
                  >
                 <span style="margin-left:5px;color:rgba(74, 241, 208, 0.9)" v-if="huiyilunwenData.addNumberShow">+ {{huiyilunwenData.addNumber}}<Icon type="md-arrow-round-up" style="display: inline-block;"/></span>
                </transition>
              </div>
              <div style="margin-bottom:5px">入库人才数：
                <span style="color:#8098ee;display: inline-block;" >
                  <count-to :end="rukurencaiData.total" :timing="0">
                      <span slot="right">&nbsp;万</span>
                    </count-to>
                </span>
                <transition
                    enter-active-class="animate__animated animate__fadeIn animate__delay-0.1s"
                    leave-active-class="animate__animated animate__fadeOut animate__delay-0.1s"
                  >
                 <span style="margin-left:5px;color:rgba(74, 241, 208, 0.9)" v-if="rukurencaiData.addNumberShow">+ {{rukurencaiData.addNumber}}<Icon type="md-arrow-round-up" style="display: inline-block;"/></span>
                </transition>
              </div>
              <div>清洗人才数：
                <span style="color:#8098ee;display: inline-block;">
                  <count-to :end="qingxirencaiData.total" :timing="0">
                      <span slot="right">&nbsp;万</span>
                    </count-to>
                </span>
                 <transition
                    enter-active-class="animate__animated animate__fadeIn animate__delay-0.1s"
                    leave-active-class="animate__animated animate__fadeOut animate__delay-0.1s"
                  >
                 <span style="margin-left:5px;color:rgba(74, 241, 208, 0.9)" v-if="qingxirencaiData.addNumberShow">+ {{qingxirencaiData.addNumber}}<Icon type="md-arrow-round-up" style="display: inline-block;"/></span>
                </transition>
              </div>
            </div>
          </div>
        </transition>
        <!-- 统计数据 end-->

        <!-- 上右领域控制 start -->
         <transition
           enter-active-class="animate__animated animate__fadeInUp animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutDown animate__delay-0.1s"
        >
        <div v-show="allshow == false" class="select-modal" style="width: 20%;position: absolute;right:37.7%;top:17%;">
          <Row :gutter="32">
            <Col span="12">
              <Select
                style="width: 100%"
                transfer-class-name="select-transfer"
                v-model="lingyuValue[1]"
                transfer
                placeholder="产业"
                @on-change="changeLingyuChlidren"
              >
                <Option value="all">产业</Option>
                <Option
                  v-for="(item, index) in cylineData"
                  :value="index"
                  :key="index"
                  >{{ index }}</Option
                >
              </Select>
            </Col>
            <Col span="12">
              <Select
                style="width: 100%"
                transfer-class-name="select-transfer"
                v-model="lingyuLevelValue"
                transfer
                placeholder="层次"
                @on-change="changeLingyuChlidren(lingyuValue[1])"
              >
                <Option value="all">层次</Option>
                <Option value="100">前100名</Option>
                <Option value="1000">前1000名</Option>
                <Option value="10000">前10000名</Option>
              </Select>
            </Col>
          </Row>
        </div>
        </transition>
        <!-- 上右领域控制 end -->

        <!-- 领域标题 -->
        <transition
          enter-active-class="animate__animated animate__fadeInDown animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutUp animate__delay-0.1s"
        >
          <div class="main_top_center" v-if="!allshow">
            <div class="main_top_center_title">芯片制造领域产业结构</div>
          </div>
        </transition>
        <!-- 领域标题 -->

        <!-- 科研标题 -->
        <transition
          enter-active-class="animate__animated animate__fadeInLeftBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutLeftBig animate__delay-0.1s"
        >
          <div class="main_top_center" v-if="allshow">
            <div class="main_top_center_title">全球科研人才分布</div>
          </div>
        </transition>
        <!-- 科研标题 -->

        <!-- gif -->
        <transition
          enter-active-class="animate__animated animate__fadeInDown animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutUp animate__delay-0.1s"
        >
          <div class="person-box" v-if="showPerson">
            <div class="gif">
              <div class="openPerson" @click="showPerson = false">
                <Icon type="md-close" size="24" />
              </div>
              <!-- <div class="go-home" @click="goSys">
                >>> 进入系统
              </div> -->
              <div style="font-size:14px;top:12.5%;right:8%;color:#19FFE5;position: absolute;">
                <div>采集方式：{{personData.alldata.doc_num > 10 ? "更新" : "新增"}}</div>
                <div>时间：{{parseTime(Date.parse(new Date()) - (Math.floor(Math.random() * (3600000 - 3400000)) + 3400000))}}</div>
              </div>
              <div class="personInfo">
                <Row style="width: 100%; height: 100%">
                  <Col span="24">
                    <Row :gutter="16">
                      <Col span="12" class="mb-15">
                        <span>姓名：{{ personData.name }}</span>
                      </Col>
                      <Col span="12" class="mb-15">
                        <span>国家：{{ personData.country }}</span>
                      </Col>
                      <Col span="12" class="mb-15">
                        <span>所属学科：{{ personData.subject }}</span>
                      </Col>
                      <Col span="12" class="mb-15">
                        <span>测算年龄：{{ personData.alldata.age }}</span>
                      </Col>
                      <Col span="12" class="mb-15">
                        <span
                          >期刊论文数：{{ (personData.alldata.doc_num - personData.alldata.conference) > 0 ? personData.alldata.doc_num - personData.alldata.conference : 0 }}</span
                        >
                      </Col>
                      <Col span="12" class="mb-15">
                        <span
                          >会议论文数：{{personData.alldata.conference}}</span
                        >
                      </Col>
                      <!-- <Col span="24" class="mb-15">
                        <span>十年论文产出：{{personData.alldata.doc_num > 0 ? Math.round(personData.alldata.doc_num/personData.alldata.doc_num) : 0}}</span>
                      </Col> -->
                      <Col span="12" class="mb-15">
                        <span
                          >华人：{{
                            personData.alldata.ischinses == 1 ? "是" : "否"
                          }}</span
                        >
                      </Col>
                      <!-- <Col span="12" class="mb-15">
                        <span
                          >采集方式：{{personData.alldata.doc_num > 10 ? "更新" : "新增"}}</span
                        >
                      </Col> -->
                      <!-- <Col span="24" class="mb-15">
                        <span
                          >采集时间：{{parseTime(Date.parse(new Date()) - 3600)}}</span
                        >
                      </Col> -->
                    </Row>
                  </Col>
                  <!-- <Col
                    span="12"
                    style="
                      height: 100%;
                      position: absolute;
                      width: 80%;
                      left: 32%;
                    "
                  >
                    <chart-radar
                      style="width: 100%; height: 100%"
                      :value="radarValue"
                      :max="radarMax"
                      color="rgba(25,255,229,0.6)"
                    ></chart-radar>
                  </Col> -->
                </Row>
              </div>
            </div>
          </div>
        </transition>

        <!-- 左上角名单列表 -->
        <transition
          enter-active-class="animate__animated animate__fadeInLeftBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutLeftBig animate__delay-0.1s"
        >
          <div class="main_top_left" v-if="allshow">
            <div class="frame-top"></div>
            <div class="frame-right1"></div>
            <div class="frame-right2"></div>
            <div class="frame-bottom"></div>
            <vue-seamless-scroll
              v-if="updateTalentlist"
              :data="talentlist"
              :class-option="optionSingleHeight"
              class="seamless-warp"
              style="padding: 1%"
            >
              <ul class="talentlist" style="z-index: -11">
                <li v-for="(item, index) in talentlist" :key="index">
                  <Row :gutter="8" target="_blank" class="talents-list">
                    <Col span="6" class="name" @click.native="goPersonInfo(item.uid,item.alldata.asjc)">{{ item.name }}</Col>
                    <Col span="4" class="country">{{ item.country }}</Col>
                    <Col span="5" class="subject">{{ item.subject }}</Col>
                    <Col span="5" class="level">{{ item.level }}</Col>
                    <Col span="4" class="chinese">{{ item.chinese }}</Col>
                  </Row>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </transition>
        <!-- 左上角名单列表 end-->

        <!-- 领域左上角图表 -->
        <transition
          enter-active-class="animate__animated animate__fadeInLeftBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutLeftBig animate__delay-0.1s"
        >
          <div class="main_top_left_v2" v-if="!allshow" style="width: 25%">
            <chart-bar
              :value="
                Object.keys(lingyuinfo.ky_country[lingyuLevelValue]).map(function (key) {
                  return lingyuinfo.ky_country[lingyuLevelValue][key];
                })
              "
              text="科研人才国家分布"
              :xAxis="{
                data: Object.keys(lingyuinfo.ky_country[lingyuLevelValue]),
                axisLabel: {
                  textStyle: { color: '#7FA8FF' },
                  interval: 0,
                  rotate: allCountryLevelValue != 'all' ? 45 : 0,
                },
              }"
              :yAxis="{ axisLabel: { show: false } }"
              :series="kyCountrySeries"
              :grid="{ left: 0, right: '15%' }"
              style="height: 100%; width: 100%"
            ></chart-bar>
          </div>
        </transition>
        <!-- 领域左上角图表 end-->

        <!-- 领域中间图表 -->
        <transition
          enter-active-class="animate__animated animate__fadeInLeftBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutLeftBig animate__delay-0.1s"
        >
          <div class="main_center_left_v2" v-if="!allshow" style="width: 25%">
            <chart-bar
              :value="
                Object.keys(lingyuinfo.ky_city[lingyuLevelValue]).map(function (key) {
                  return lingyuinfo.ky_city[lingyuLevelValue][key];
                })
              "
              text="科研人才城市分布"
              :xAxis="{
                data: Object.keys(lingyuinfo.ky_city[lingyuLevelValue]),
                axisLabel: {
                  textStyle: { color: '#7FA8FF' },
                  interval: 0,
                  rotate: 335,
                },
              }"
              :yAxis="{ axisLabel: { show: false } }"
              :series="kyCitySeries"
              :grid="{ left: 0, right: '15%' }"
              style="height: 100%; width: 100%"
            ></chart-bar>
          </div>
        </transition>
        <!-- 领域中间图表 end-->

        <!-- 流程详细框 start-->
          <transition
          enter-active-class="animate__animated animate__fadeInDown animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutUp animate__delay-0.1s"
        >
          <div class="main-center-subject-box" v-if="showChanYeLian" style="background-color: rgba(0,0,0,1);z-index:100000">
            <div
              class="openPerson"
              @click="showChanYeLian = false"
              style="z-index: 100000"
            >
              <Icon type="md-close" size="24" />
            </div>
            <div class="frame-top" style="height: 3%"></div>
            <div class="frame-bottom" style="height: 4%"></div>
            <div style="width: 100%; height: 100%; padding: 8% 10%">
              <Row>
                <Col span="24"><div style="font-size: 24px; color: #fff;text-align:center">
                    <span style="color: #ef7017">{{chanYeLianData.name}}</span>介绍
                  </div>
                </Col>
                <div style="margin-top:15%">
                  <Col span="10">
                  <img style="width: 240px; height: 180px" :src="chanYeLianData.imagesUrl" />
                </Col>
                <Col span="12">
                  <div style="color: #fff; margin-top: 10px;text-align:center;font-size:18px">
                     {{chanYeLianData.content}}
                  </div>
                </Col>
                </div>
              </Row>
              <Row style="position: absolute;bottom:25%;;width:100%;color:#fff;">
                <Col span="8" v-if="chanYeLianData.technology!=''">关键技术：{{chanYeLianData.technology}}</Col>
                <Col span="8" v-if="chanYeLianData.materials!=''">关键材料：{{chanYeLianData.materials}}</Col>
                <Col span="8" v-if="chanYeLianData.facility!=''">关键设备：{{chanYeLianData.facility}}</Col>
              </Row>
              <Row style="position: absolute;bottom:10%;;width:100%;color:#fff;text-align:center">
                <Col span="5" v-if="chanYeLianData.btn.length>0" v-for="item in chanYeLianData.btn">
                  <div class="lingyu-btn" style="height:50px;width:120px;line-height:55px" @click="changeLingyuChlidren(item)">{{item}}</div>
                </Col>
              </Row>
            </div>
          </div>
        </transition>
        <!-- 流程详细框 end-->

        <!-- 产业地图 -->
        <transition
          enter-active-class="animate__animated animate__fadeInUpBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutDownBig animate__delay-0.1s"
        >
          <div class="chart-map" v-if="!allshow" >
            <div style="width: 100%; height: 100%;">
              <div class="xinpan-bg" style="width:53%;height:75%;position: absolute;left:23%;top:18%"></div>
              <div style="width:53%;height:75%;position: absolute;left:23%;top:18%;background-color:rgba(0,0,0,0.6);">
                <div style="position:relative;width:100%;height:100%">
                  <!-- <div style="position: absolute;top:-50px;left:35px;color:#19FFE5;font-size:18px">衬底材料</div> -->
                  <div style="border:2px dashed #19FFE5;width:15%;height:100%">
                    <div style="position: absolute;left:3%;top:3%;text-align:center" @click="clickChanYeLian('衬底材料')" class="shou-box">
                      <div class="yuanliao-box"></div>
                      <div class="font-liucheng">衬底材料</div>
                    </div>

                    <div class="vertical-straight" style="position: absolute;top:20%;left:7%;height:50px"></div>
                    <div class="arrows-bottom" style="position: absolute;top:26.5%;left:6.1%"></div>

                    <div  style="position: absolute;top:30%;left:3%" @click="clickChanYeLian('拉晶切割')" class="shou-box">
                      <div class="lajingqiege-box"></div>
                      <div class="font-liucheng">拉晶切割</div>
                    </div>

                    <div class="vertical-straight" style="position: absolute;top:45%;left:7%;height:50px"></div>
                    <div class="arrows-bottom" style="position: absolute;top:51.5%;left:6.1%"></div>

                    <div  style="position: absolute;top:55%;left:3%"  @click="clickChanYeLian('研磨')" class="shou-box">
                      <div class="yanmo-box"></div>
                      <div class="font-liucheng">研磨</div>
                    </div>

                     <div class="vertical-straight" style="position: absolute;top:71%;left:7%;height:50px"></div>
                    <div class="arrows-bottom" style="position: absolute;top:77.5%;left:6.1%"></div>

                    <div  style="position: absolute;top:82%;left:3%" @click="clickChanYeLian('清洗')" class="shou-box">
                      <div class="qingxi-box"></div>
                      <div class="font-liucheng">清洗</div>
                    </div>
                    <div class="standard-straight" style="position: absolute;bottom:12%;left:12%"></div>
                    <div class="vertical-straight" style="position: absolute;bottom:12.1%;left:18%;height:414px"></div>
                    <div class="standard-straight" style="position: absolute;top:36%;left:18%"></div>
                    <div class="arrows-right" style="position: absolute;top:34.8%;left:23.2%"></div>

                    <div  style="position: absolute;top:30%;left:25.7%" @click="clickChanYeLian('硅片氧化')" class="shou-box">
                      <div class="guipianyanghua-box"></div>
                      <div class="font-liucheng">硅片氧化</div>
                    </div>

                    <div class="standard-straight" style="position: absolute;top:36%;left:34.7%;width:70px"></div>
                    <div class="arrows-right" style="position: absolute;top:34.8%;left:41%"></div>

                    <div  style="position: absolute;top:30%;left:44.5%" @click="clickChanYeLian('光刻胶涂布')" class="shou-box">
                      <div class="guangkejiao-box"></div>
                      <div class="font-liucheng">光刻胶涂布</div>
                    </div>

                    <div style="position: absolute;left:25.7%;top:3%;text-align:center"  @click="clickChanYeLian('电路设计')" class="shou-box">
                      <div class="dianlusheji-box"></div>
                      <div class="font-liucheng">电路设计</div>
                    </div>

                    <div class="standard-straight" style="position: absolute;top:10%;left:34.7%;width:70px"></div>
                    <div class="arrows-right" style="position: absolute;top:9%;left:41%"></div>

                    <div  style="position: absolute;top:3%;left:44.5%"  @click="clickChanYeLian('掩膜版制作')" class="shou-box">
                      <div class="yanbobanzhizuo-box"></div>
                      <div class="font-liucheng">掩膜版制作</div>
                    </div>

                    <div class="standard-straight" style="position: absolute;top:10%;left:54.7%;width:45px"></div>
                    <div class="standard-straight" style="position: absolute;top:36%;left:54.7%;width:45px"></div>
                    <div class="vertical-straight" style="position: absolute;top:10%;left:59.1%;height:210px"></div>
                    <div class="standard-straight" style="position: absolute;top:22%;left:59.1%;width:70px"></div>
                    <div class="arrows-right" style="position: absolute;top:20.7%;left:66%"></div>

                    <div  style="position: absolute;top:14.7%;left:70%"  @click="clickChanYeLian('曝光显影')" class="shou-box">
                      <div class="baoguangxianying-box"></div>
                      <div class="font-liucheng">曝光显影</div>
                    </div>

                    <div class="standard-straight" style="position: absolute;top:22%;left:80%;width:70px"></div>
                    <div class="arrows-right" style="position: absolute;top:20.7%;left:86.5%"></div>

                    <div  style="position: absolute;top:14.7%;left:89.5%"  @click="clickChanYeLian('刻蚀')" class="shou-box">
                      <div class="keshi-box"></div>
                      <div class="font-liucheng">刻蚀</div>
                    </div>

                    <div class="vertical-straight" style="position: absolute;top:32%;left:93.5%;height:50px"></div>
                    <div class="arrows-bottom" style="position: absolute;top:38%;left:92.6%"></div>

                    <div  style="position: absolute;top:42.5%;left:89.5%" @click="clickChanYeLian('扩散·离子注入')" class="shou-box">
                      <div class="kuosan-box"></div>
                      <div class="font-liucheng">扩散·离子注入</div>
                    </div>

                    <div class="vertical-straight" style="position: absolute;top:58%;left:93.5%;height:30px"></div>
                    <div class="arrows-bottom" style="position: absolute;top:61.5%;left:92.6%"></div>

                    <div class="standard-straight" style="position: absolute;top:49%;left:80%;width:70px"></div>
                    <div class="arrows-left" style="position: absolute;top:47.7%;left:78.6%"></div>

                    <div  style="position: absolute;top:42.5%;left:70%"  @click="clickChanYeLian('平坦化')" class="shou-box">
                      <div class="pingtanhua-box"></div>
                      <div class="font-liucheng">平坦化</div>
                    </div>

                    <div class="standard-straight" style="position: absolute;top:49%;left:49%;width:180px"></div>
                    <div class="vertical-straight" style="position: absolute;top:46%;left:49%;height:25px"></div>
                    <div class="arrows-top" style="position: absolute;top:43.7%;left:48%"></div>

                    <div  style="position: absolute;top:64.5%;left:89.5%"  @click="clickChanYeLian('晶片针测')" class="shou-box">
                      <div class="jingpianzhence-box"></div>
                      <div class="font-liucheng">晶片针测</div>
                    </div>

                    <div class="standard-straight" style="position: absolute;top:71%;left:80%;width:70px"></div>
                    <div class="arrows-left" style="position: absolute;top:69.7%;left:78.6%"></div>

                   <div  style="position: absolute;top:64.5%;left:70%"  @click="clickChanYeLian('切割')" class="shou-box">
                      <div class="qiege-box"></div>
                      <div class="font-liucheng">切割</div>
                    </div>

                    <div class="standard-straight" style="position: absolute;top:71%;left:57%;width:100px"></div>
                    <div class="arrows-left" style="position: absolute;top:69.7%;left:55%"></div>

                    <div  style="position: absolute;top:64.5%;left:44.5%" @click="clickChanYeLian('引线键合')" class="shou-box">
                      <div class="yinxianjianhe-box"></div>
                      <div class="font-liucheng">引线键合</div>
                    </div>

                    <div class="standard-straight" style="position: absolute;top:70%;left:35.8%;width:70px"></div>
                    <div class="arrows-left" style="position: absolute;top:68.8%;left:34%"></div>

                    <div  style="position: absolute;top:64.5%;left:25.7%"  @click="clickChanYeLian('封装')" class="shou-box">
                      <div class="fengzhuang-box"></div>
                      <div class="font-liucheng">封装</div>
                    </div>

                    <div class="vertical-straight" style="position: absolute;bottom:7%;left:30%;height:100px"></div>
                    <div class="standard-straight" style="position: absolute;bottom:7%;left:30%;width:560px"></div>
                     <div class="arrows-right" style="position: absolute;bottom:6%;left:86%"></div>

                    <div  style="position: absolute;top:86%;left:89.5%"  @click="clickChanYeLian('终测')" class="shou-box">
                      <div class="zhongce-box"></div>
                      <div class="font-liucheng">终测</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <chart-world-map
                v-if="mapData.length > 0"
                :value="lingyuinfo.map.all"
                style="height: 100%; width: 100%"
                :geo="{ layoutCenter: ['46%', '45%'], layoutSize: '120%' }"
                :visualMap="{
                  inRange: {
                    color: ['#8e71ff', 'rgba(142, 113, 255, 0.1)'].reverse(),
                  },
                }"
              ></chart-world-map> -->
            </div>
          </div>
        </transition>
        <!-- 产业地图 end-->

        <!-- 科研地图 -->
        <transition
          enter-active-class="animate__animated animate__fadeInRightBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutRightBig animate__delay-0.1s"
        >
          <div class="chart-map" v-if="allshow">
            <div style="width: 100%; height: 100%">
              <chart-world-map
                v-if="mapData.length > 0"
                :value="mapData"
                :dotValue="talentlistall"
                style="height: 100%; width: 100%"
                @showPersonInfo="showPersonInfo"
                :geo="{ layoutCenter: ['46%', '50%'], layoutSize: '160%' }"
              ></chart-world-map>
            </div>
          </div>
        </transition>
        <!-- 科研地图 end-->

        <!-- 学科占比图 start-->
        <transition
          enter-active-class="animate__animated animate__fadeInDown animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutUp animate__delay-0.1s"
        >
          <div class="main-center-subject-box" v-if="showSubjectBox">
            <div
              class="openPerson"
              @click="showSubjectBox = false"
              style="z-index: 100000"
            >
              <Icon type="md-close" size="24" />
            </div>
            <div class="frame-top" style="height: 3%"></div>
            <div class="frame-bottom" style="height: 4%"></div>
            <chart-pie
              :text="pieSubjectText"
              subtext="人才学科占比情况"
              :title="{
                textStyle: { fontSize: 26, color: '#fff' },
                textAlign: 'center',
                subtextStyle: { fontSize: 18, color: '#fff' },
                y: '42%',
                x: '55%',
              }"
              :value="pieSubject"
              :legend="{
                top: '10%',
                bottom: '9%',
                left: '5%',
                orient: 'vertical',
                type: 'scroll',
                icon: 'circle',
                textStyle: {
                  color: '#fff',
                },
                formatter: function (name) {
                  let data = pieSubject;
                  let total = 0;
                  let tarValue = 0;
                  for (let i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                      tarValue = data[i].value;
                    }
                  }
                  let p = ((tarValue / total) * 100).toFixed(2);
                  return name + ' ' + ' ' + p + '%';
                },
              }"
              :series="[
                {
                  labelLine: {
                    length: 20,
                    length2: 20,
                  },
                  roseType: false,
                  minAngle: 12,
                  color: [
                    '#D44C2D',
                    '#FA8F2F',
                    '#d27210',
                    '#d27827',
                    '#CF7B25',
                    '#D99D21',
                    '#FAE927',
                    '#E9E416',
                    '#C9DA36',
                    '#9ECB3C',
                    '#6DBC49',
                    '#37B44E',
                    '#3DBA78',
                    '#14ADCF',
                    '#209AC9',
                    '#1E91CA',
                    '#2C6BA0',
                    '#2B55A1',
                    '#2D3D8E',
                    '#44388E',
                    '#6A368B',
                    '#7D3990',
                    '#A63F98',
                    '#C31C88',
                    '#D52178',
                    '#D5225B',
                    '#D02C2A',
                  ].reverse(),
                  center: ['55%', '50%'],
                },
              ]"
              style="height: 100%; width: 100%"
            />
          </div>
        </transition>
        <!-- 学科占比图 end -->

        <!-- 指数介绍图 start-->
        <transition
          enter-active-class="animate__animated animate__fadeInDown animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutUp animate__delay-0.1s"
        >
          <div class="main-center-subject-box" v-if="showPieIndex">
            <div
              class="openPerson"
              @click="showPieIndex = false"
              style="z-index: 100000"
            >
              <Icon type="md-close" size="24" />
            </div>
            <div class="frame-top" style="height: 3%"></div>
            <div class="frame-bottom" style="height: 4%"></div>
            <div class="go-anli" v-if="!showAnli && pieIndexData.anli!=null" @click="showAnli = true">
              >>> 查看案例
            </div>
            <div class="go-anli" v-if="showAnli && pieIndexData.anli!=null" @click="showAnli = false">
              >>> 返回介绍
            </div>
            <div style="width: 100%; height: 100%; padding: 8% 10%">
              <Row>
                <transition
                enter-active-class="animate__animated animate__fadeInRight animate__delay-0.1s"
                leave-active-class="animate__animated animate__fadeOutRight animate__delay-0.1s"
                >
                <Col span="24" v-if="!showAnli" style="position: absolute;">
                  <div style="text-align: center; font-size: 24px; color: #fff">
                    <span style="color: #ef7017">{{pieIndexData.name}}</span>指数介绍
                  </div>
                  <div style="color: #fff; margin-top: 15px">
                    {{pieIndexData.subtext}}
                  </div>
                  <div
                    style="
                      text-align: center;
                      font-size: 20px;
                      color: #fff;
                      margin-top: 30px;
                    "
                  >
                    <div  v-if="pieIndexData.name!='AIF'">重点解决</div>
                  </div>
                  <div
                    style="color: #fff; margin-top: 15px; text-align: center"
                  >
                    {{pieIndexData.emphasisText}}
                  </div>
                  <div style="text-align: center; margin-top: 15px">
                    <img style="width: 420px; height: 200px" :src="pieIndexData.imagesUrl" />
                  </div>
                </Col>
                </transition>
                <transition
                enter-active-class="animate__animated animate__fadeInLeft animate__delay-0.1s"
                leave-active-class="animate__animated animate__fadeOutLeft animate__delay-0.1s"
                >
                <Col span="24" v-if="showAnli && pieIndexData.anli!=null" style="position: absolute;">
                  <div style="text-align: center; font-size: 24px; color: #fff">
                    <span style="color: #ef7017">{{pieIndexData.name}}</span>指数应用案例
                  </div>
                  <div style="color: #fff; margin-top: 20px">
                    <Row>
                      <Col span="24"> {{pieIndexData.anli.author}} </Col>
                      <Col span="24" style="margin-top: 10px">
                        {{pieIndexData.anli.school}} 
                      </Col>
                      <Col :span="pieIndexData.name=='CA+' ? 8 : 4" style="margin-top: 10px"
                        >学科：{{pieIndexData.anli.subject}}</Col
                      >
                      <Col :span="pieIndexData.name=='CA+' ? 8 : 12" style="margin-top: 10px"
                        >研究领域：{{pieIndexData.anli.field}} </Col
                      >
                      <Col span="8" style="margin-top: 10px">
                        <Row>
                          <Col span="10"> 引进指数： </Col>
                          <Col span="14">
                            <Rate disabled :allow-half="true" :value="pieIndexData.anli.rate" />
                          </Col>
                        </Row>
                      </Col>
                      <Col
                        span="24"
                        style="
                          margin-top: 40px;
                          color: #ff9900;
                          font-size: 14px;
                        "
                      >
                        <Badge status="warning" />{{pieIndexData.anli.content}}
                      </Col>
                      <Col span="24" style="margin-top: 20px">
                        <table class="modal-table">
                          <tbody>
                            <tr>
                              <td style="width: 15%">
                                <span style="color: #ef7017">H</span>指数
                              </td>
                              <td style="width: 10%; color: #ef7017">{{pieIndexData.anli.table["H"].score}}</td>
                              <td>
                                库内720万人才中，按 H 指数排名<span
                                  style="color: #ef7017"
                                  >{{pieIndexData.anli.table["H"].rank}}</span
                                >名
                              </td>
                            </tr>
                            <tr>
                              <td style="width: 15%">
                                <span style="color: #ef7017">CA+</span>指数
                              </td>
                              <td style="width: 10%; color: #4cfaff">{{pieIndexData.anli.table["CA+"].score}}</td>
                              <td>
                                库内720万人才中，按 CA+ 指数排名<span
                                  style="color: #ef7017"
                                  >{{pieIndexData.anli.table["CA+"].rank}}</span
                                >名，单指标前<span style="color: #ef7017"
                                  >{{pieIndexData.anli.table["CA+"].level}}</span
                                >
                              </td>
                            </tr>
                            <tr>
                              <td style="width: 15%">
                                <span style="color: #ef7017">G</span>指数
                              </td>
                              <td style="width: 10%; color: #4cfaff">{{pieIndexData.anli.table["G"].score}}</td>
                              <td>
                                库内720万人才中，按 G 指数排名<span
                                  style="color: #ef7017"
                                  >{{pieIndexData.anli.table["G"].rank}}</span
                                >名，单指标前<span style="color: #ef7017">{{pieIndexData.anli.table["G"].level}}</span
                                >
                              </td>
                            </tr>
                            <tr>
                              <td style="width: 15%">画像分</td>
                              <td style="width: 10%">{{pieIndexData.anli.table["Index"].score}}</td>
                              <td>
                               库内720万人才中，按 画像分 排名<span
                               style="color: #ef7017"
                                  >{{pieIndexData.anli.table["Index"].rank}}</span
                                >名，学科前<span style="color: #ef7017">{{pieIndexData.anli.table["Index"].level}}</span
                                >人才
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </Col>
                      <Col span="24" style="margin-top: 15px">
                        <div>注：数据来源截至2021年4月</div>
                      </Col>
                    </Row>
                  </div>
                </Col>
                </transition>
              </Row>
            </div>
          </div>
        </transition>
        <!-- 指数介绍图 end -->

        <!-- 控制板 -->
        <!-- <transition
          enter-active-class="animate__animated animate__fadeInDown animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutUp animate__delay-0.1s"
        >
          <div
            ref="boxshow"
            :class="{ 'main-center-left': true }"
            v-show="boxshow"
          >
            <div class="border-top"></div>
            <div class="border-bottom"></div>
            <div class="modal-block">
              <table class="modal-table">
                <thead>
                  <tr>
                    <th>模块</th>
                    <th>层次</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>全球人才分布地图</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="mapLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(mapLevelValue, 'Map')"
                      >
                        <Option value="all">层次</Option>
                        <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option>
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>全球人才国家分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="allCountryLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="
                          changeModal(allCountryLevelValue, 'allCountry')
                        "
                      >
                        <Option value="all">层次</Option>
                        <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option>
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>全球人才学科分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="allSubjectLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="
                          changeModal(allSubjectLevelValue, 'allSubject')
                        "
                      >
                        <Option value="all">层次</Option>
                        <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option>
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>全球人才城市分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="allCityBySubjectLevelValue"
                        transfer
                        placeholder="选择所属学科"
                        @on-change="
                          changeModal(
                            allCityBySubjectLevelValue,
                            'allCityBySubject'
                          )
                        "
                      >
                        <Option
                          v-for="item in subjectList"
                          :value="item"
                          :key="item"
                          >{{ item }}</Option
                        >
                      </Select>
                    </td>
                  </tr>

                  <tr>
                    <td>CA+指数人才分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="caLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(caLevelValue, 'CA+')"
                      >
                        <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option>
                        <Option value="all">层次</Option>
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>H++指数人才分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="hLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(hLevelValue, 'H++')"
                      >
                        <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option>
                        <Option value="all">层次</Option>
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                  <tr>
                    <td>G指数人才分布</td>
                    <td>
                      <Select
                        transfer-class-name="select-transfer"
                        v-model="gLevelValue"
                        transfer
                        placeholder="选择人才层次"
                        @on-change="changeModal(gLevelValue, 'G')"
                      >
                        <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option>
                        <Option value="all">层次</Option>
                        <Option value="100">前100名</Option>
                        <Option value="1000">前1000名</Option>
                        <Option value="10000">前10000名</Option>
                      </Select>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </transition> -->
        <!-- 控制板 end-->

        <!-- 左下角学科分布图表 -->
        <transition
          enter-active-class="animate__animated animate__fadeInUp animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutDown animate__delay-0.1s"
        >
          <div class="main-bottom-left" v-if="allshow" style="width: 23.5%">
            <div class="select-modal" style="right: 13.5%; text-align: right">
              <!-- <Row :gutter="16">
				<Col span="8">
					 <Button @click="changeModal('学科','index')">重置</Button>
				</Col>
				<Col span="8">
					<Button>上翻</Button>
				</Col>
				<Col span="8">
					<Button>下翻</Button>
				</Col>
			  </Row> -->
              <Button @click="changeModal('学科', 'index')">重置</Button>
              <!-- <Select
                transfer-class-name="select-transfer"
                v-model="allSubjectLevelValue"
                transfer
                placeholder="选择人才层次"
                @on-change="changeModal(allSubjectLevelValue, 'allSubject')"
              >
                <Option value="all">层次</Option>
                <Option value="100">前100名</Option>
                <Option value="1000">前1000名</Option>
                <Option value="10000">前10000名</Option>
              </Select> -->
            </div>
            <chart-bar
              :value="
                Object.keys(allSubject)
                  .reverse()
                  .map(function (key) {
                    return allSubject[key];
                  })
              "
              text="全球人才学科分布"
              style="height: 100%; width: 100%"
              :xAxis="{ type: 'value', axisLabel: { show: false } }"
              :yAxis="{
                type: 'category',
                axisLabel: { inside: true, textStyle: { color: '#fff' } },
                data: Object.keys(allSubject).reverse(),
              }"
              :dataZoom="[
                {
                  orient: 'vertical',
                  show: true,
                  start: 100,
                  end: 85,
                  right: '15%',
                  textStyle: { color: '#fff' },
                  width: 10,
                  fillerColor: 'rgb(114,136,241,0.2)',
                  backgroundColor: 'rgba(0,0,0,0)',
                  top: '9.2%',
                  bottom: '8.5%',
                },
              ]"
              @changeModal="changeModal"
              :series="chartpie2Series"
              :grid="{ left: 0, right: '17.2%', bottom: '8%' }"
            ></chart-bar>
          </div>
        </transition>

        <!-- 左下角学科分布图表 end-->

        <!-- 左下角科研机构列表 -->
        <transition
          enter-active-class="animate__animated animate__fadeInUp animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutDown animate__delay-0.1s"
        >
          <div class="main-bottom-left" v-if="!allshow" style="width: 25%">
            <chart-bar
              :value="
                Object.keys(lingyuinfo.ky_org[lingyuLevelValue])
                  .slice(0, 5)
                  .reverse()
                  .map(function (key) {
                    return lingyuinfo.ky_org[lingyuLevelValue][key];
                  })
              "
              text="科研人才机构列表"
              :xAxis="{ type: 'value' }"
              :yAxis="{
                type: 'category',
                axisLabel: { inside: true, textStyle: { color: '#fff' } },
                data: Object.keys(lingyuinfo.ky_org[lingyuLevelValue]).slice(0, 5).reverse(),
              }"
              :series="kyOrgSeries"
              :grid="{ left: 0, right: '15%' }"
              style="height: 100%; width: 100%"
            ></chart-bar>
          </div>
        </transition>
        <!-- 左下角科研机构列表 end-->

        <!--  右上角全球人才国家分布 -->
        <transition
          enter-active-class="animate__animated animate__fadeInRightBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutRightBig animate__delay-0.1s"
        >
          <div class="main-top-right" v-if="allshow" style="width: 21.5%">
            <div class="select-modal">
              <Row :gutter="16">
                <Col span="12">
                  <Select
                    transfer-class-name="select-transfer"
                    v-model="allCountryBySubjectLevelValue"
                    transfer
                    placeholder="选择学科"
                    @on-change="
                      changeModal(
                        allCountryBySubjectLevelValue,
                        'allCountryBySubject'
                      )
                    "
                  >
                    <Option
                      v-for="item in subjectList"
                      :value="item"
                      :key="item"
                      >{{ item }}</Option
                    >
                  </Select>
                </Col>
                <Col span="12">
                  <Select
                    transfer-class-name="select-transfer"
                    v-model="allCountryLevelValue"
                    transfer
                    placeholder="选择层次"
                    @on-change="changeModal(allCountryLevelValue, 'allCountry')"
                  >
                    <Option value="all">层次</Option>
                    <!-- <Option value="1%">前1%</Option>
                <Option value="15%">前15%</Option> -->
                    <Option value="100">前100名</Option>
                    <Option value="1000">前1000名</Option>
                    <Option value="10000">前10000名</Option>
                  </Select>
                </Col>
              </Row>
            </div>
            <chart-bar
              :value="
                Object.keys(allCountry).map(function (key) {
                  return allCountry[key];
                })
              "
              text="全球人才国家分布"
              :xAxis="{
                data: Object.keys(allCountry),
                axisLabel: {
                  textStyle: { color: '#7FA8FF' },
                  interval: 0,
                  rotate: allCountryBySubjectLevelValue != '学科' ? 335 : 0,
                },
              }"
              :yAxis="{ axisLabel: { show: false } }"
              :series="chartpie1Series"
              :grid="{ left: '2%', right: '2%' }"
              @changeModal="changeModal"
              style="height: 100%; width: 100%"
            ></chart-bar>
          </div>
        </transition>
        <!-- 右上角全球人才国家分布 end-->

        <!-- 右上角产业人才国家分布 -->
        <transition
          enter-active-class="animate__animated animate__fadeInRightBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutRightBig animate__delay-0.1s"
        >
          <div class="main-top-right" v-if="!allshow" style="width: 25%">
            <chart-bar
              :value="
                Object.keys(lingyuinfo.cy_country[lingyuLevelValue]).map(function (key) {
                  return lingyuinfo.cy_country[lingyuLevelValue][key];
                })
              "
              text="产业人才国家分布"
              :title="{ left: 'auto', right: 0 }"
              :yAxis="{ axisLabel: { show: false } }"
              :xAxis="{ data: Object.keys(lingyuinfo.cy_country[lingyuLevelValue]) }"
              style="height: 100%; width: 100%"
              :series="cyCountrySeries"
              :grid="{ left: '10%', right: '2%', bottom: '10%' }"
            ></chart-bar>
          </div>
        </transition>
        <!-- 右上角产业人才国家分布 end-->

        <!-- 右下领域选项卡 -->
        <transition
          enter-active-class="animate__animated animate__fadeInRightBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutRightBig animate__delay-0.1s"
        >
          <div class="main-bottom-right main-bottom-right-v2" v-if="allshow">
            <div class="frame-top" style="height: 3%"></div>
            <!-- <div class="frame-right1"></div> -->
            <div class="frame-right2"></div>
            <div class="frame-bottom" style="height: 4%"></div>
            <div
              style="
                position: absolute;
                top: 7%;
                left: 35%;
                color: #fff;
                font-size: 16px;
              "
            >
              产业人才专项
            </div>
            <Row :gutter="16" style="padding: 12% 15px 0 15px">
              <Col
                span="12"
                style="margin-bottom: 2.5%; height: 60px"
                v-for="(item, index) in lingyulist"
                :key="index"
              >
                <div
                  :class="index == 0 ? 'lingyu-btn' : 'lingyu-btn-disabled'"
                  @click="changeLingyu(item.name)"
                >
                  {{
                    item.name +
                    (item.num > 0
                      ? "(" +
                        (item.num >= 10000
                          ? Math.round((item.num / 10000) * 100) / 100 + "万人)"
                          : item.num + "人)")
                      : "")
                  }}
                </div>
              </Col>
            </Row>
          </div>
        </transition>
        <!-- 右下领域选项卡 end-->

        <!-- 右中产业人才城市分布 -->
        <transition
          enter-active-class="animate__animated animate__fadeInRightBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutRightBig animate__delay-0.1s"
        >
          <div class="main-center-right" v-if="!allshow" style="width: 25%">
            <!-- <div class="select-modal">
              <Select
                transfer-class-name="select-transfer"
                v-model="chinaSubjectLevelValue"
                transfer
                placeholder="选择人才层次"
                @on-change="
                  changeModal(chinaSubjectLevelValue, 'chinaSubject')
                "
              >
                <Option value="all">层次</Option>
                <Option value="1%">前1%</Option>
                        <Option value="15%">前15%</Option>
                <Option value="100">前100名</Option>
                <Option value="1000">前1000名</Option>
                <Option value="10000">前10000名</Option>
              </Select>
            </div> -->
            <chart-bar
              :value="
                Object.keys(lingyuinfo.cy_city[lingyuLevelValue]).map(function (key) {
                  return lingyuinfo.cy_city[lingyuLevelValue][key];
                })
              "
              text="产业人才城市分布"
              :title="{ left: 'auto', right: 0 }"
              :yAxis="{ axisLabel: { show: false } }"
              :xAxis="{
                data: Object.keys(lingyuinfo.cy_city[lingyuLevelValue]),
                axisLabel: {
                  textStyle: { color: '#7FA8FF' },
                  interval: 0,
                  rotate: 25,
                },
              }"
              style="height: 100%; width: 100%"
              :grid="{ left: '10%', right: '2%', bottom: '20%' }"
              :series="chartpie3Series"
            ></chart-bar>
          </div>
        </transition>
        <!-- 右中产业人才城市分布 end-->

        <!-- 右中人才城市分布 -->
        <transition
          enter-active-class="animate__animated animate__fadeInRightBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutRightBig animate__delay-0.1s"
        >
          <div
            v-if="allshow"
            class="main-center-right"
            style="width: 22.5%; height: 32%"
          >
            <div class="select-modal">
              <Row :gutter="16">
                <Col span="12">
                  <Select
                    transfer-class-name="select-transfer"
                    v-model="allCityBySubjectLevelValue"
                    transfer
                    placeholder="选择学科"
                    @on-change="
                      changeModal(
                        allCityBySubjectLevelValue,
                        'allCityBySubject'
                      )
                    "
                  >
                    <Option
                      v-for="item in subjectList"
                      :value="item"
                      :key="item"
                      >{{ item }}</Option
                    >
                  </Select>
                </Col>
                <Col span="12">
                  <Select
                    transfer-class-name="select-transfer"
                    v-model="allCityLevelValue"
                    transfer
                    placeholder="选择层次"
                    @on-change="changeModal(allCityLevelValue, 'allCity')"
                  >
                    <Option value="all">层次</Option>
                    <!-- <Option value="1%">前1%</Option>
								<Option value="15%">前15%</Option> -->
                    <Option value="100">前100名</Option>
                    <Option value="1000">前1000名</Option>
                    <Option value="10000">前10000名</Option>
                  </Select>
                </Col>
              </Row>
            </div>
            <chart-bar
              :value="
                Object.keys(allCityBySubject).map(function (key) {
                  return allCityBySubject[key];
                })
              "
              text="全球人才城市分布"
              :xAxis="{
                data: Object.keys(allCityBySubject),
                axisLabel: {
                  textStyle: { color: '#7FA8FF' },
                  interval: 0,
                  rotate: 25,
                },
              }"
              @changeModal="changeModal"
              :yAxis="{ axisLabel: { show: false } }"
              style="height: 100%; width: 100%"
              :grid="{ left: '6.5%', right: '1.5%' }"
              :title="{ left: '5%' }"
              :series="chartpie3Series"
            ></chart-bar>
          </div>
        </transition>
        <!-- 右中人才城市分布 end-->

        <!-- 右下角产业人才企业列表 -->
        <transition
          enter-active-class="animate__animated animate__fadeInRightBig animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutRightBig animate__delay-0.1s"
        >
          <div v-if="!allshow" class="main-bottom-right" style="width: 22.5%">
            <!-- <div class="select-modal">
                <Select
                  transfer-class-name="select-transfer"
                  v-model="allCityBySubjectLevelValue"
                  transfer
                  placeholder="选择人才层次"
                  @on-change="changeModal(allCityBySubjectLevelValue, 'allCityBySubject')"
                >
                  <Option value="all">层次</Option>
                  <Option value="1%">前1%</Option>
                          <Option value="15%">前15%</Option>
                  <Option value="100">前100名</Option>
                  <Option value="1000">前1000名</Option>
                  <Option value="10000">前10000名</Option>
                </Select>
              </div> -->
            <chart-bar
              :value="
                Object.keys(lingyuinfo.cy_company[lingyuLevelValue])
                  .slice(0, 5)
                  .reverse()
                  .map(function (key) {
                    return lingyuinfo.cy_company[lingyuLevelValue][key];
                  })
              "
              text="产业人才企业列表"
              :title="{ left: 'auto', right: 0 }"
              :xAxis="{ type: 'value' }"
              :yAxis="{
                type: 'category',
                axisLabel: { inside: true, textStyle: { color: '#fff' } },
                data: Object.keys(lingyuinfo.cy_company[lingyuLevelValue]).slice(0, 5).reverse(),
              }"
              :series="cyCompanySeries"
              :grid="{ left: 0, right: '1%' }"
              style="height: 100%; width: 100%"
            ></chart-bar>
          </div>
        </transition>
        <!-- 右下角产业人才企业列表 end-->

        <!-- 中下控制板 -->
        <transition
          enter-active-class="animate__animated animate__fadeInUp animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutDown animate__delay-0.1s"
        >
          <div
            class="main-bottom-center"
            v-if="allshow"
            style="height: 25%; bottom: 2%"
          >
            <div class="frame-top-2" style="height: 6%"></div>
            <div class="frame-bottom" style="height: 6%"></div>
            <!-- <div class="panel" @click="boxshow = !boxshow">
							<Icon type="ios-paper-outline" size="24" />
						</div> -->
            <div
              class="select-modal"
              style="right: -10px; position: absolute; width: 24%; top: 2%"
            >
              <Row :gutter="16">
                <Col span="12">
                    <Select
                      transfer-class-name="select-transfer"
                      v-model="indexSubjectValue"
                      transfer
                      placeholder="选择学科"
                      @on-change="changeModal(indexSubjectValue, 'index')"
                    >
                      <Option v-for="item in subjectList" :value="item" :key="item">{{
                        item
                      }}</Option>
                    </Select>
                </Col>
                <Col span="12">
                  <Select
                    transfer-class-name="select-transfer"
                    v-model="indexSubjectLevelValue"
                    transfer
                    placeholder="选择层次"
                    @on-change="changeModal(indexSubjectValue, 'index')"
                  >
                    <Option value="100">前100名</Option>
                    <Option value="1000">前1000名</Option>
                    <Option value="10000">前10000名</Option>
                  </Select>
                </Col>
              </Row>
            </div>
            <Row style="height: 100%">
              <Col span="6" style="height: 100%">
                <div class="chart-pie-border-1"></div>
                <div class="chart-pie-border-3"></div>
                <div
                  class="chart-pie-index-info"
                  @click="clickPieIndex('CA+')"
                ></div>
                <chart-pie
                  text="CA+指数"
                  subtext="查看介绍"
                  :value="CA.slice(0, 5)"
                  style="height: 100%; width: 100%"
                />
              </Col>
              <Col span="6" style="height: 100%">
                <div class="chart-pie-border-2"></div>
                <div class="chart-pie-border-3"></div>
                <div
                  class="chart-pie-index-info"
                  @click="clickPieIndex('H++')"
                ></div>
                <chart-pie
                  text="H++指数"
                  subtext="查看介绍"
                  :value="H.slice(0, 5)"
                  style="height: 100%; width: 100%"
                />
              </Col>
              <Col span="6" style="height: 100%">
                <div class="chart-pie-border-4"></div>
                <div class="chart-pie-border-3"></div>
                 <div
                  class="chart-pie-index-info"
                  @click="clickPieIndex('G')"
                ></div>
                <chart-pie
                  text="G指数"
                  subtext="查看介绍"
                  :value="G.slice(0, 5)"
                  style="height: 100%; width: 100%"
                />
              </Col>
              <Col span="6" style="height: 100%">
                <div class="chart-pie-border-5"></div>
                <div class="chart-pie-border-3"></div>
                 <div
                  class="chart-pie-index-info"
                  @click="clickPieIndex('AIF')"
                ></div>
                <chart-pie
                  text="AIF指数"
                  subtext="查看介绍"
                  :value="demo"
                  :series="[{animation:false}]"
                  :tooltip="{show: false}"
                  style="height: 100%; width: 100%"
                />
              </Col>
            </Row>
          </div>
        </transition>
        <!-- 中下控制板 -->

        <!-- 领域中下控制板 -->
        <!-- <transition
          enter-active-class="animate__animated animate__fadeInUp animate__delay-0.1s"
          leave-active-class="animate__animated animate__fadeOutDown animate__delay-0.1s"
        >
          <div
            class="main-bottom-center"
            v-if="!allshow"
            style="width: 53%; left: 23%"
          >
            <div class="frame-top-2" style="height: 6%"></div>
            <div class="frame-bottom" style="height: 6%"></div>
            <div
              class="select-modal"
              style="margin-right: 2%; margin-top: 2%; width: 15%"
            >
              <Select
                style="width: 100%"
                transfer-class-name="select-transfer"
                v-model="lingyuValue[1]"
                transfer
                placeholder="选择人才层次"
                @on-change="changeLingyuChlidren"
              >
                <Option value="all">全部产业</Option>
                <Option
                  v-for="(item, index) in cylineData"
                  :value="index"
                  :key="index"
                  >{{ index }}</Option
                >
              </Select>
            </div>
            <chart-bar
              :value="
                Object.keys(cylineData).map(function (key) {
                  return cylineData[key];
                })
              "
              text="产业链人才分布"
              :title="{ top: '10%', left: '5%' }"
              :xAxis="{
                data: Object.keys(cylineData),
                axisLabel: {
                  textStyle: { color: '#7FA8FF' },
                  interval: 0,
                },
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
              }"
              :yAxis="{
                axisLabel: { show: false },
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
              }"
              :series="cylineSeries"
              @changeLingyuChlidren="changeLingyuChlidren"
              :dataZoom="[
                {
                  show: true,
                  start: 0,
                  end: 24,
                  bottom: '10%',
                  textStyle: { color: '#fff' },
                },
              ]"
              :grid="{ left: '2%', right: '2%', top: '20%', bottom: '35%' }"
              style="height: 100%; width: 100%"
            ></chart-bar>
          </div>
        </transition> -->
        <!-- 领域中下控制板 -->
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from "_c/count-to";
import vueSeamlessScroll from "vue-seamless-scroll";
import "./css/index.css";
import { ChartWorldMap, ChartBar, ChartPie, ChartRadar } from "./charts";
import chartData from "./data/chartdata.json";
import talentlist from "./data/talent_list.json";
import lingyudata from "./data/lingyu.json";
import {parseTime} from '@/libs/index.js'
export default {
  components: {
    CountTo,
    vueSeamlessScroll,
    ChartWorldMap,
    ChartBar,
    ChartPie,
    ChartRadar,
  },
  data() {
    return {
      parseTime:null,
      lingyuLevelValue:'all',
      demo:[{name:"AIF",value:100}],
      showChanYeLian:false,
      chanYeLianData:{},
      chanYeLianList:{
        "衬底材料":{
          name:"衬底材料",
          content:"衬底材料是半导体芯片的底层材料，起到物理支撑、导热、导电等作用。",
          technology:"",
          materials:"硅（Si）、砷化镓（GaAs）、碳化硅（SiC）、氮化镓（GaN）、磷化铟（InP）",
          facility:"",
          imagesUrl: require("./images/icon/硅原料.png"),
          btn:['衬底材料']
        },
        "电路设计":{
          name:"电路设计",
          content:"电路设计是运用专业软件将晶体管等电路元件摆放、连线和模拟的过程。",
          technology:"EDA软件",
          materials:"",
          facility:"",
          imagesUrl: require("./images/icon/电脑设计.png"),
          btn:[]
        },
        "掩膜版制作":{
          name:"掩膜版制作",
          content:"掩膜版制作是按照芯片制造工艺要求把芯片步图拆分成光刻掩膜版的过程。",
          technology:"",
          materials:"掩膜版等工艺材料",
          facility:"",
          imagesUrl: require("./images/icon/掩模版制作.png"),
          btn:['工艺材料']
        },
        "拉晶切割":{
          name:"拉晶切割",
          content:"拉单晶是把多晶硅通过熔溶、提拉、晶体生长的等工序变成单晶硅的工艺。切割是把单晶硅切割成圆片的工艺。",
          technology:"",
          materials:"",
          facility:"晶圆切割",
          imagesUrl: require("./images/icon/拉晶切割.png"),
          btn:['晶圆切割']
        },
        "研磨":{
          name:"研磨",
          content:"研磨是使衬底表面局部平整度要求小于设计线宽的2/3工艺。",
          technology:"",
          materials:"",
          facility:"抛光",
          imagesUrl: require("./images/icon/研磨.png"),
          btn:['抛光']
        },
        "清洗":{
          name:"清洗",
          content:"将晶圆在不断被加工成形及抛光处理的过程中，由于与各种有机物、粒子及金属接触而产生的污染物清除的工艺。",
          technology:"",
          materials:"抛光液（工艺材料）",
          facility:"晶圆清洗（晶圆切割）",
          imagesUrl: require("./images/icon/研磨.png"),
          btn:['工艺材料','晶圆切割']
        },
        "硅片氧化":{
          name:"清洗",
          content:"硅片氧化是在硅片上生成一层很薄的氧化膜，使硅片表面成为绝缘体，为其后在硅片上制作电路元件做准备的工艺。",
          technology:"",
          materials:"",
          facility:"氧化炉（扩散设备）",
          imagesUrl: require("./images/icon/硅片氧化.png"),
          btn:['扩散']
        },
        "光刻胶涂布":{
          name:"光刻胶涂布",
          content:"光刻胶涂布是在硅片上涂布光刻胶的过程，一般旋转涂布光刻胶的厚度与光刻机曝光的光源波长有关。",
          technology:"",
          materials:"光刻胶材料（工艺材料）",
          facility:"涂胶设备（光刻设备）",
          imagesUrl: require("./images/icon/光刻胶涂布.png"),
          btn:['工艺材料','光刻']
        },
        "曝光显影":{
          name:"曝光显影",
          content:"曝光显影是像传统洗印照片一样把光刻掩膜版上的图形用投影（或接触转移）到光刻胶上，进行精准曝光。",
          technology:"",
          materials:"光刻胶、显影液（工艺材料）",
          facility:"光刻",
          imagesUrl: require("./images/icon/曝光显影.png"),
          btn:['工艺材料','光刻']
        },
        "刻蚀":{
          name:"刻蚀",
          content:"刻蚀是对光刻胶图形下的氧化膜进行雕刻的过程，把光刻胶覆盖的氧化膜保留，其它部分去掉（或者反之），然后再把其余光刻胶去除。",
          technology:"",
          materials:"",
          facility:"刻蚀",
          imagesUrl: require("./images/icon/刻蚀.png"),
          btn:['刻蚀']
        },
        "扩散·离子注入":{
          name:"扩散及离子注入",
          content:"扩散是对硅片上指定区域定量掺入其它元素原子，离子注入是向指定区域定量注入杂质的原子或粒子，均用于改变区域的电性能。同时配合氧化和CVD、PVD工艺在指定区域沉积氧化层或所需材料层。",
          technology:"",
          materials:"",
          facility:"扩散  离子注入  薄膜生长",
          imagesUrl: require("./images/icon/扩散离子注入.png"),
          btn:['扩散','离子注入','薄膜生长']
        },
        "平坦化":{
          name:"平坦化",
          content:"圆片上做了几层电路图形的“光刻”和“加工”循环后图形表面凹凸不平，平坦化就是将其表面打磨平整的过程。",
          technology:"",
          materials:"",
          facility:"CMP等抛光设备",
          imagesUrl: require("./images/icon/平坦化.png"),
          btn:['抛光']
        },
        "晶片针测":{
          name:"晶片针测",
          content:"晶片针测是对芯片做电性功能上的测试，在进入封装之前先过滤出电性功能不良的芯片的过程。",
          technology:"",
          materials:"",
          facility:"金属化",
          imagesUrl: require("./images/icon/晶片针测.png"),
          btn:['金属化']
        },
        "切割":{
          name:"切割",
          content:"切割又称划片，是指用不同方法将单个芯片从圆片上分离出来。进行切割前先进行圆片减薄，对圆片背面进行刻蚀或研磨，将圆片减薄至封装所需厚度。",
          technology:"",
          materials:"",
          facility:"背面减薄  激光切割",
          imagesUrl: require("./images/icon/切割.png"),
          btn:['背面减薄']
        },
        "引线键合":{
          name:"引线键合",
          content:"引线键合是在半导体器件封装过程中实现芯片与基板或框架互连的方法。",
          technology:"",
          materials:"封底材料",
          facility:"引线键合 贴片",
          imagesUrl: require("./images/icon/引线缝合.png"),
          btn:['引线键合','贴片']
        },
        "封装":{
          name:"封装",
          content:"完成引线键合后需要将芯片覆盖模塑料进行保护，称为塑封或模塑（或者用玻璃等其它材料模塑），完成封装。",
          technology:"",
          materials:"封底材料",
          facility:"模塑 切筋/成形",
          imagesUrl: require("./images/icon/封装.png"),
          btn:['模塑','切筋成形']
        },
        "终测":{
          name:"终测",
          content:"终测就是最终的测试，检验封装良率，测试结束即可投入使用。",
          technology:"",
          materials:"",
          facility:"终测",
          imagesUrl: require("./images/icon/终测.png"),
          btn:['终测']
        },
      },
      pieIndexData:{},
      pieIndexList: {
        "CA+": {
          name: "CA+",
          subtext:"基于论文引用人的学术水平赋权，来反映学者的学术水平。在原来引用次数评价的基础上进行了拓展。根据引用者水平的不同，赋予不同的权重，识别并剔除了无效引用。",
          emphasisText: "单纯的数量统计无法真实区分人才学术能力的问题",
          imagesUrl: require("./images/ca.svg"),
          anli: {
            author: "Cao*（本科毕业于中国科学技术大学）",
            school: "麻省理工学院，美国",
            subject: "材料科学",
            field: "石墨烯材料",
            rate: 4,
            content:"科睿唯安 全球高被引科学家未纳入，DPOT中纳入高成长性的高端人才。",
            table: {
              H: {
                score: 20,
                rank: 1085965,
                level: "",
              },
              "CA+": {
                score: 41.33,
                rank: 25385,
                level: "1%",
              },
              G: {
                score: 1.45,
                rank: 6819,
                level: "1%",
              },
              Index: {
                score: 383,
                rank: 16396,
                level: "15%",
              },
            },
          },
        },
        "H++": {
          name: "H++",
          subtext:"基于论文引用的不同赋权叠加，来反映学者的学术水平。通过发文量和被引量的区分，把原来简单的量变成了不同质和量的叠加。对发文量给予了适当关注，对于发文少引用高也给予了适当关注，解决了对做冷门研究的人才评价不科学，以及引用滞后性带来的问题。",
          emphasisText: "论文数量少但被引频次高，以及论文数量多但被引频次低和作者排序问题",
          imagesUrl: require("./images/h.png"),
          anli: {
            author: "赵**",
            school: "上海科技大学（原美国HyperJet Fusion Corporation公司）",
            subject: "物理",
            field: "等离子、超高磁场、电磁轨道炮",
            rate: 4,
            content:"科睿唯安 全球高被引科学家未纳入，DPOT系统中纳入前15%人才。",
            table: {
              H: {
                score: 10,
                rank: 1714312,
                level: "",
              },
              "CA+": {
                score: 16.68,
                rank: 19024,
                level: "1%",
              },
              G: {
                score: 0.97,
                rank: 28904,
                level: "1%",
              },
              Index: {
                score: 161,
                rank: 21492,
                level: "15%",
              },
            },
          },
        },
        "G": {
          name: "G",
          subtext:"基于一定年限，通过数字画像模型对同一人的评价，描述人才成长情况。",
          emphasisText: "发现高成长性人才",
          imagesUrl: require("./images/g.svg"),
          anli: null
        },
        "AIF": {
          name: "AIF",
          subtext:"AIF指数（论文影响因子）是DPOT系统新增的一个指标，用于测算单篇论文的影响力，也是首次提出对单篇论文进行影响力评价的指数，进一步完善了DPOT评价模型。",
          emphasisText: "AIF指数在对论文进行评价时，除了考虑到论文的被引情况外，还考虑到了被谁引、何时被引等因素，因此可用来判断一篇论文对行业的持续性影响，也有利于对代表作的评价。",
          imagesUrl: require("./images/aif.png"),
          anli: null
        },
      },
      showAnli: false,
      caImage: require("./images/ca.png"),
      showPieIndex: false,
      showSubjectBox: false,
      updateTalentlist: true,
      boxshow: false,
      allshow: true,
      mapLevelValue: "all",
      allSubjectLevelValue: "all",
      allCountryLevelValue: "all",
      allCityLevelValue: "all",
      chinaSubjectLevelValue: "all",
      allCountryBySubjectLevelValue: "学科",
      allCityBySubjectLevelValue: "学科",
      indexSubjectValue: "学科",
      caLevelValue: "all",
      hLevelValue: "all",
      gLevelValue: "all",
      levelList: [
        { label: "前1%", value: "1%" },
        { label: "前15%", value: "15%" },
        { label: "前100", value: "100" },
        { label: "前1000", value: "1000" },
        { label: "前10000", value: "10000" },
      ],
      chartList: [
        "地图",
        "全球学者学科人才分布",
        "中国学者学科人才分布",
        "中国学者城市分布",
        "CA+指数人才分布",
        "H++指数人才分布",
        "G指数人才分布",
      ],
      chartpie3Series: [
        {
          id: "citySubject",
          label: { show: false },
          barCategoryGap: "60%",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgb(54,214,210)" },
                { offset: 1, color: "rgba(18,44,50,0.5)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      chartpie2Series: [
        {
          id: "allsubject",
          label: { show: false },
          barCategoryGap: "60%",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 1, color: "rgb(153,103,255)" },
                { offset: 0, color: "rgba(37,21,66,0.5)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      chartpie1Series: [
        {
          id: "countrySubject",
          label: { show: false },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 1, color: "rgba(122, 66, 137, 0.52)" },
                { offset: 0, color: "rgba(221, 61, 108, 1)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      cyCountrySeries: [
        {
          label: { show: false },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 1, color: "rgba(122, 66, 137, 0.52)" },
                { offset: 0, color: "rgba(221, 61, 108, 1)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      cyCompanySeries: [
        {
          label: { show: false },
          barCategoryGap: "60%",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: "rgba(36, 59, 107, 0.14)" },
                { offset: 1, color: "rgba(61, 148, 254, 1)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      cylineSeries: [
        {
          id: "cyline",
          label: { show: false },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgb(153,103,255)" },
                { offset: 1, color: "rgba(37,21,66,0.5)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      kyCountrySeries: [
        {
          label: { show: false },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 1, color: "rgba(36, 59, 107, 0.14)" },
                { offset: 0, color: "rgba(46, 181, 251, 1)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      kyCitySeries: [
        {
          label: { show: false },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 1, color: "rgba(64, 6, 21, 0.1)" },
                { offset: 0, color: "rgba(255, 102, 102, 1)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      kyOrgSeries: [
        {
          label: { show: false },
          barCategoryGap: "60%",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: "rgba(71, 42, 19, 0.15)" },
                { offset: 1, color: "rgba(231, 152, 90, 1)" },
              ],
              globalCoord: false,
            },
          },
        },
      ],
      mapData: [],
      allSubject: [],
      chinaSubject: [],
      allCountry: [],
      allCityBySubject: [],
      CA: [],
      H: [],
      G: [],
      chartData: {},
      talentlist: [],
      mainTop: false,
      lingyulist: [],
      lingyuinfo: {},
      subjectList: [],
      cylineData: {},
      talentlistall: [],
      showPerson: false,
      personData: {},
      lingyuValue: [],
      radarValue: [],
      radarMax: 0,
      pieSubject: [],
      indexSubjectLevelValue:'100',
      numberData:{},
      lunwenData:{
        total:4.15,
        updateTime:[3,5],
        addNumber:0,
        addNumberShow:false,
        addNumberRange:[11,50]
      },
      huiyilunwenData:{
        total:1398,
        updateTime:[3,5],
        addNumber:0,
        addNumberShow:false,
        addNumberRange:[1,20]
      },
      rukurencaiData:{
        total:703,
        updateTime:[3,5],
        addNumber:0,
        addNumberShow:false,
        addNumberRange:[5,15]
      },
      qingxirencaiData:{
        total:3217,
        updateTime:[3,5],
        addNumber:0,
        addNumberShow:false,
        addNumberRange:[1,10]
      }
    };
  },
  created() {
    this.parseTime = parseTime;
    var that = this;
    var lingyulist = [];
    for (var i in lingyudata) {
      lingyulist.push({
        name: i,
        num: lingyudata[i]["ky_total"],
      });
    }
    this.lingyulist = lingyulist;
    that.talentlistall = talentlist;
    that.talentlist = that.getRandomArrayElements(talentlist, 100);

    setInterval(function () {
      // that.updateTalentlist = false
      that.$nextTick(() => {
        that.talentlist = that.getRandomArrayElements(talentlist, 100);
        // that.updateTalentlist = true
      });
    }, 60000);
    
    this.chartData = chartData;
    this.mapData = chartData["Map"]["all"];
    this.allSubject = chartData["allSubject"]["all"];
    this.chinaSubject = chartData["chinaSubject"]["all"];
    this.allCountry =
      chartData["subjectSplit"]["学科"]["country"]["sum_index"]["all"];
    this.subjectList = Object.keys(chartData["allCityBySubject"]);
    this.allCityBySubject =
      chartData["subjectSplit"]["学科"]["city"]["sum_index"]["all"];
    // this.CA = chartData['CA+']['1%'];
    // this.H = chartData['H++']['1%'];
    // this.G = chartData['G']['1%'];
    var CA = [];
    Object.keys(
      chartData["subjectSplit"]["学科"]["country"]["CA+"]["100"]
    ).forEach((key) => {
      CA.push({
        name: key,
        value: chartData["subjectSplit"]["学科"]["country"]["CA+"]["100"][key],
      });
    });
    this.CA = CA;
    var H = [];
    Object.keys(
      chartData["subjectSplit"]["学科"]["country"]["H++"]["100"]
    ).forEach((key) => {
      H.push({
        name: key,
        value: chartData["subjectSplit"]["学科"]["country"]["H++"]["100"][key],
      });
    });
    this.H = H;
    var G = [];
    Object.keys(
      chartData["subjectSplit"]["学科"]["country"]["G"]["100"]
    ).forEach((key) => {
      G.push({
        name: key,
        value: chartData["subjectSplit"]["学科"]["country"]["G"]["100"][key],
      });
    });
    this.G = G;
  },
  mounted() {
    const that = this;
    this.onResize();
    window.onresize = () => {
      return (() => {
        that.onResize();
      })();
    };
    that.setAddNumber('lunwenData');
    that.setAddNumber('huiyilunwenData');
    that.setAddNumber('rukurencaiData');
    that.setAddNumber('qingxirencaiData');
  },
  computed: {
    optionSingleHeight() {
      return {
        // singleHeight: 31.5,
        step: 0.1,
      };
    },
  },
  methods: {
    setAddNumber(key) {
      var that = this;
      // 设置增量
      var timer_min = that[key].updateTime[0];
      var timer_max = that[key].updateTime[1]+1;
      var number_min =  that[key].addNumberRange[0];
      var number_max =  that[key].addNumberRange[1] + 1;
      var timer = Math.floor(Math.random()*(timer_max - timer_min) + timer_min) * 1000 * 60;
      setTimeout(function () {
        that[key].addNumber =  Math.floor(Math.random()*(number_max - number_min) + number_min);
        that[key].addNumberShow = true;
        setTimeout(function () {
          that[key].addNumberShow = false;
        },1000)
        that.setAddNumber(key)
      },timer)
    },
    goPersonInfo(uid,asjc) {
      let routeUrl = this.$router.resolve({
        name: 'info',
        params: {
          uid:uid
        }
      })
      window.open(routeUrl.href+'?code='+asjc, '_blank')
    },
    clickChanYeLian(type) {
      this.chanYeLianData = this.chanYeLianList[type]
      this.showChanYeLian = true;
    },
    clickPieIndex(type) {
      this.pieIndexData = this.pieIndexList[type];
      this.showAnli = false;
      this.showPieIndex = true;
    },
    goSys() {
      let routeUrl = this.$router.resolve({
        name: "home",
      });
      window.open(routeUrl.href, "_blank");
    },
    onResize() {
      var w = document.documentElement.clientWidth || document.body.clientWidth;
      var h = document.documentElement.clientHeight || document.body.clientHeight;

      if (w < h) {
        var transform =
          "scale(" +
          w / 1080 +
          "," +
          h / 1920 +
          ") rotate(90deg) translate(0px, -" +
          1080 +
          "px)";
      } else {
        var transform = "scale(" + w / 1920 + "," + h / 1080 + ")";
      }
      this.$refs.main.style.transform = transform;
    },
    showPersonInfo(data) {
      this.personData = data;
      var new_data = data.alldata;
      var maxlist = [405, 330, 165, 180, 120, 135],
        score = [
          new_data.xueshu_index,
          new_data.keji_index,
          new_data.huodong_index,
          new_data.qushi_index,
          new_data.redu_index,
          new_data.hezuozhe_index,
        ],
        new_score = [];
      for (var i = 0; i < maxlist.length; i++) {
        new_score.push(score[i] / maxlist[i]);
      }
      var maxScore = Math.max.apply(null, new_score);
      var new_score_list = [];
      for (var i = 0; i < new_score.length; i++) {
        new_score_list.push(new_score[i] * (1 / maxScore));
      }

      this.radarValue = new_score_list;
      this.radarMax = 1;
      this.showPerson = true;
    },
    changeLingyu(value) {
      var lingyuValue = [value, "all"];
      this.lingyuValue = lingyuValue;
      var lingyuinfo = lingyudata[value];
      this.lingyuinfo = lingyuinfo;
      var data = lingyuinfo["chlidren"];
      var cylineData = {};
      for (var i in data) {
        cylineData[i] = data[i]["ky_total"];
      }
      this.cylineData = cylineData;
      this.allshow = false;
    },
    changeLingyuChlidren(value) {
      if (this.lingyuValue.length > 0) {
        if (value == "all") {
          var lingyuinfo = lingyudata[this.lingyuValue[0]];
          this.lingyuinfo = lingyuinfo;
        } else {
          if (lingyudata[this.lingyuValue[0]]["chlidren"][value]!=undefined) {
            this.lingyuValue[1] = value;
            var lingyuinfo = lingyudata[this.lingyuValue[0]]["chlidren"][value];
            this.lingyuinfo = lingyuinfo;
          }
        }
      }
    },
    changeModal(value, modal) {
      if (modal == "Map") {
        this.mapData = chartData["Map"][value];
      } else if (modal == "allSubject") {
        this.allSubject = chartData["allSubject"][value];
      } else if (modal == "chinaSubject") {
        this.chinaSubject = chartData["chinaSubject"][value];
      } else if (modal == "allCountryBySubject") {
        var subject = value,
          level = this.allCountryLevelValue;
        this.allCountry =
          chartData["subjectSplit"][subject]["country"]["sum_index"][level];
      } else if (modal == "allCountry") {
        var subject = this.allCountryBySubjectLevelValue,
          level = value;
        this.allCountry =
          chartData["subjectSplit"][subject]["country"]["sum_index"][level];
      } else if (modal == "allCityBySubject") {
        var subject = value,
          level = this.allCityLevelValue;
        this.allCityBySubject =
          chartData["subjectSplit"][subject]["city"]["sum_index"][level];
      } else if (modal == "allCity") {
        var subject = this.allCityBySubjectLevelValue,
          level = value;
        this.allCityBySubject =
          chartData["subjectSplit"][subject]["city"]["sum_index"][level];
      } else if (modal == "index") {
        this.indexSubjectValue = value;
        this.allCityBySubjectLevelValue = value;
        this.changeModal(value, "allCityBySubject");
        this.changeModal(value, "allCountryBySubject");
        this.allCountryBySubjectLevelValue = value;
        var level = this.indexSubjectLevelValue;
        var CA = [];
        Object.keys(
          chartData["subjectSplit"][value]["country"]["CA+"][level]
        ).forEach((key) => {
          CA.push({
            name: key,
            value:
              chartData["subjectSplit"][value]["country"]["CA+"][level][key],
          });
        });
        this.CA = CA;
        var H = [];
        Object.keys(
          chartData["subjectSplit"][value]["country"]["H++"][level]
        ).forEach((key) => {
          H.push({
            name: key,
            value:
              chartData["subjectSplit"][value]["country"]["CA+"][level][key],
          });
        });
        this.H = H;
        var G = [];
        Object.keys(
          chartData["subjectSplit"][value]["country"]["G"][level]
        ).forEach((key) => {
          G.push({
            name: key,
            value:
              chartData["subjectSplit"][value]["country"]["CA+"][level][key],
          });
        });
        this.G = G;
      } else if (modal == "pieCountrySubject" || modal == "pieCitySubject") {
        if (modal == "pieCountrySubject") {
          var data = chartData["subjectPie"][value][this.allCountryLevelValue];
        }
        if (modal == "pieCitySubject") {
          var data = chartData["subjectPie"][value][this.allCityLevelValue];
        }

        var pieSubject = [];
        Object.keys(data)
          .sort((a, b) => {
            return data[b] - data[a];
          })
          .forEach((key) => {
            pieSubject.push({
              name: key,
              value: data[key],
            });
          });
        this.pieSubjectText = value;
        this.pieSubject = pieSubject;
        this.showSubjectBox = true;
      }
      // else if (modal == 'CA+') {
      // 	this.CA = chartData['CA+'][value];
      // } else if (modal == 'H++') {
      // 	this.H = chartData['H++'][value];
      // } else if (modal == 'G') {
      // 	this.G = chartData['G'][value];
      // }
    },
    getRandomArrayElements(arr, count) {
      var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp,
        index;
      while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
      }
      return shuffled.slice(min);
    },
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "overflow:hidden");
  },
  // 销毁前清除
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>
<style scoped="scoped">
/* #chart-main >>> .count-to-wrapper .content-outer {
  display: block;
  text-align: center;
} */

#chart-main >>> .ivu-select {
  font-size: 12px;
  color: #fff;
}

#chart-main >>> .ivu-select-single .ivu-select-selection {
  height: 26px;
  border-radius: 0px;
  background-color: transparent;
  border-color: transparent;
}

#chart-main
  >>> .ivu-select-single
  .ivu-select-selection
  .ivu-select-placeholder {
  height: 24px;
  line-height: 24px;
}

#chart-main
  >>> .ivu-select-single
  .ivu-select-selection
  .ivu-select-selected-value {
  height: 24px;
  line-height: 24px;
}

.select-modal >>> .ivu-select-single .ivu-select-selection {
  border-color: #33629f !important;
}

.select-modal >>> .ivu-btn {
  height: 28px;
  border: 1px solid #33629f;
  background-color: transparent;
  border-radius: 0px;
  color: #fff;
}

#chart-main >>> .ivu-rate {
  font-size: 14px;
}

#chart-main >>> .content-outer {
  display: inline-block;
}
</style>

<style>
.seamless-warp {
  height: 100%;
  overflow: hidden;
}

.index-count-class {
  display: inline !important;
  margin-top: 0 !important;
}

.index-unit-class {
  color: white;
}

.select-transfer {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #33629f;
}

.select-transfer .ivu-select-item {
  color: #fff;
}

.select-transfer .ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #adc4ff;
}

.select-transfer .ivu-select-item:hover {
  color: #fff;
  background-color: rgba(88, 125, 221, 1);
}

.select-transfer .ivu-select-item-focus {
  color: #fff;
  background-color: rgba(88, 125, 221, 1);
}

.select-transfer::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  background-color: transparent !important;
}

.select-transfer::-webkit-scrollbar-thumb {
  background-color: rgba(35, 66, 130, 0.6) !important;
  border-radius: 4px !important;
  background-clip: unset !important;
  border-width: 0 !important;
}
</style>
